<template>
  <div class="app-container fullscreen" >
    <div class="headBar">
      <img src="@/assets/images/njHead.png" alt="" />
      <div class="headName">
        农场作业监控
      </div>
    </div>
    <div class="container">
      <div id="left">
        <div class="blockView">
          <div class="title"></div>
          <div class="title flex">
            <span>机群控制</span>
<!--            <el-select v-model="eqPlate" placeholder="请选择" @change="handleSelectChange">-->
<!--              <el-option v-for="item in eqPlatList" :key="item.value" :label="item.label" :value="item.value"> </el-option>-->
<!--            </el-select>-->
          </div>
          <div class="list">
            <div class="listItem">机群点火</div>
            <div class="listItem">机群熄火</div>
            <div class="listItem">开始作业</div>
            <div class="listItem">停止作业</div>
          </div>
        </div>
        <div v-if="false" class="blockView ">
          <div class="title">SY Control</div>
          <div class="list">
            <div class="listItem SY">机群点火</div>
            <div class="listItem SY">机群熄火</div>
            <div class="listItem SY">开始作业</div>
            <div class="listItem SY">停止作业</div>
          </div>
        </div>
        <div class="blockView ">“
          <div class="title flex">
            <span>单机控制</span>
            <el-select v-model="sn" placeholder="请选择" filterable>
              <el-option v-for="item in eqList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
          <div class="list ">
            <div class="listItem SG" @click="handleEqSwitch('engineStart')">点火</div>
            <div class="listItem SG" @click="handleEqSwitch('engineEnd')">熄火</div>
            <div class="listItem SG" @click="handleEqSwitch('workStart')">开始作业</div>
            <div class="listItem SG" @click="handleEqSwitch('workEnd')">停止作业</div>
          </div>
        </div>
        <div class="buttons">
          <div class="bottonTop arrow"></div>
          <div class="bottonCenter ">
            <div class="arrowLeft"></div>
            <div class="yuan"></div>
            <div class="arrowRight"></div>
          </div>
          <div class="arrowBottom"></div>
        </div>
      </div>
      <div id="right">
        <draggable>
          <transition-group>
            <div v-for="i in 9" :key="i" class="listItem">
              <MonitorVideo :monitor="{ title: i }" />
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
    <!-- <dy-charts-iframe src="https://dycharts.com/xshow/index.html?id=068cccb5f1aef5c1d5ccd10aacddaa88" /> -->
  </div>
</template>
<script>
/** 农场作业监控 */
import MonitorVideo from '@/components/MonitorVideo'
import draggable from 'vuedraggable'
import {getLianshiToken} from '@/api/farm'
import {getLSList,eqControlLS} from '@/api/jf/equipment'
import {del} from "@/api/monitor/online";


export default {
  components: {
    MonitorVideo,
    draggable
  },
  data() {
    return {
      loading:false,
      row: 3,
      column: 3,
      command: '分栏',
      dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      eqList: [],
      eqPlatList: [
        {
          value: '1',
          label: '联试平台'
        }
      ],
      sn: '',

      eqPlate:''
    }
  },
  created: function() {
    getLSList().then((res) => {
      console.log("res",res)
      if(res.data.length>0){
        const _this = this
        res.data.forEach(function(eq){
          const obj = {}
          obj.value = eq.interface_code
          obj.label = eq.eq_code + "-" + eq.eq_type + "(" + eq.interface_code + ")"
          _this.eqList.push(obj)
        })
      }
    })
  },
  methods: {
    handleCommand(type) {
      switch (type) {
        case 'a':
          this.row = 3
          this.column = 3
          this.command = '3 * 3'
          break
        case 'b':
          this.row = 4
          this.column = 4
          this.command = '4 * 4'
          break
        case 'c':
          this.row = 2
          this.column = 3
          this.command = '2 * 3'
          break
      }
    },
    handleSelectChange(select) {
      console.log(this.eqPlate)
      if(this.eqPlate!==''){
        getLianshiToken().then((res) => {
          console.log('http://um.allynav.cn/index/realtimemonitoring?token='+res)
          window.open('http://um.allynav.cn/index/realtimemonitoring?token='+res, '_blank');
        })
      }
    },
    //设备控制
    handleEqSwitch(status){
      // this.loading = true
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });


      const params = {}
      params.sn = this.sn
      params.status = status
      eqControlLS(params).then((res) => {
        this.$alert( res.data,'提示', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: `action: ${ action }`
            // });
          }
        });
        loading.close();
        // console.log('控制结果',res)
      })


      // this.loading = false
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  //width: 1920px;
  //height: 1080px;
  width: 100%;
  height: 100%;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #010429;
}
.headBar {
  width: 100%;
  height: 144px;
  color: #fff;
  position: relative;
  img {
    width: 100%;
  }
  .headName {
    text-align: center;
    position: absolute;
    font-size: 40px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0);
  }
}
.container {
  width: 100%;
  height: calc(100% - 144px);
  display: flex;
  justify-content: space-between;
  justify-content: space-betweenF;
  #left {
    display: flex;
    flex-direction: column;
    margin-top: -32px;
    width: 26%;
    height: 100%;
    border-image-source: url(~@/assets/images/borderBg.png);
    border-image-slice: 40 fill;
    border-image-width: 40px;
    border-image-repeat: round;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    .blockView {
      &:nth-child(2) {
        flex: 1;
      }
      .title {
        font-size: 24px;
        color: rgb(23, 202, 240);
        line-height: 2.5;
        padding-left: 40px;
        margin-bottom: 10px;
      }
      .flex {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px 0 32px;
        margin-top: 10px;
      }
      .list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-around;
        color: #fff;
        font-size: 24px;
        padding-left: 16px;
        .listItem {
          width: 176px;
          height: 57px;
          margin-bottom: 15px;
          text-align: center;
          line-height: 57px;
          background: url(~@/assets/images/deepBg.png);
          background-size: contain;
          cursor: pointer;
          &:nth-child(n + 3) {
            margin-bottom: 0;
          }
        }
        .listItem.SY {
          background: url(~@/assets/images/greenBg.png);
          background-size: contain;
        }
        .listItem.SG {
          background: url(~@/assets/images/blueBg.png);
          background-size: contain;
        }
      }
    }
    .buttons {
      margin: 20px auto;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      border: 8px solid #566890;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      div {
        cursor: pointer;
      }
      .arrow {
        width: 0;
        height: 0;
        border: 40px solid transparent;
        border-bottom: 60px solid #e65a56;
        border-top: 0px solid transparent;
      }
      .bottonCenter {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .yuan {
          width: 80px;
          height: 80px;
          background: #e65a56;
          border-radius: 50%;
        }
        .arrowLeft {
          border: 40px solid transparent;
          border-left: 0px solid transparent;
          border-right: 60px solid #e65a56;
        }
        .arrowRight {
          border: 40px solid transparent;
          border-right: 0px solid transparent;
          border-left: 60px solid #e65a56;
        }
      }
      .arrowBottom {
        border: 40px solid transparent;
        border-bottom: 0px solid transparent;
        border-top: 60px solid #e65a56;
      }
    }
  }
  #right {
    width: 72%;
    height: 100%;
    > div {
      height: 100%;
      > span {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .listItem {
          width: 32%;
          height: 30%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-image-source: url(~@/assets/images/borderBg.png);
          border-image-slice: 12 fill;
          border-image-width: 12px;
          border-image-repeat: round;
          background-repeat: no-repeat;
          background-size: cover;
          padding: 10px 10px 10px 20px;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>
